<h3>{{ 'Application Info' | translate }}</h3>

<div class="app-list-item">
  <span class="label">{{ 'Version' | translate }}:</span>
  @if (isLoading()) {
    <ngx-skeleton-loader></ngx-skeleton-loader>
  } @else {
    {{ app()?.latest_version | orNotAvailable }}
  }
</div>
<div class="app-list-item sources">
  <span class="label">{{ 'Source' | translate }}:</span>
  @if (isLoading()) {
    <ngx-skeleton-loader></ngx-skeleton-loader>
  } @else {
    <div>
      @for (source of app()?.sources; track source; let last = $last) {
        <a
          class="source-link"
          target="_blank"
          [href]="source"
          [title]="source"
          [ixTest]="[app()?.name, 'source']"
        >{{ source | cleanLink }}</a>
        @if (!last) {
          <span>, </span>
        }
      } @empty {
        {{ 'N/A' | translate }}
      }
    </div>
  }
</div>
<div class="app-list-item">
  <span class="label">{{ 'Last App Update' }}:</span>
  @if (isLoading()) {
    <ngx-skeleton-loader></ngx-skeleton-loader>
  } @else {
    @if (app()?.last_update) {
      {{ relativeDate() }}
    } @else {
      {{ 'N/A' | translate }}
    }
  }
</div>
